<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>vue-router 路由嵌套</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- router-link是vue提供的标签,默认会被渲染为a标签
              to属性被会渲染为href属性
              to属性中的值被渲染为采用#开头的hash地址
        -->
      <router-link to="/index">首页</router-link>
      <router-link to="/news">新闻</router-link>
      <!-- 路由占位符(路由填充位) -->
      <router-view></router-view>
    </div>
    <script>
      //定义路由组件
      const index = {
        template: `<h1>主页内容</h1>`,
      };
      const news = {
        template: `
                 <div>
                    <h1>新闻内容</h1>
                    <hr>
                    <!-- 子路由 -->
                    <router-link to="/news/inner">国内新闻</router-link>
                    <router-link to="/news/outter">国外新闻</router-link>
                    <!-- 路由占位符(路由填充位) -->
                    <router-view></router-view>
                 </div>
                 `,
      };
      //准备子组件
      const inner = {
        template: `<h1>国内新闻内容</h1>`,
      };
      const outter = {
        template: `<h1>国外新闻内容</h1>`,
      };

      //实例化路由对象
      const router = new VueRouter({
        //通过routes属性,定义路由规则
        routes: [
          { path: "/", redirect: "/index" },
          { path: "/index", component: index },
          {
            path: "/news",
            component: news,
            children: [
              { path: "/news/inner", component: inner },
              { path: "/news/outter", component: outter },
            ],
          },
        ],
      });

      //1. 实例化一个Vue的实例
      let vm = new Vue({
        el: "#app",
        data: {},
        //router:router
        router,
      });
    </script>
  </body>
</html>
